<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用JS控制元素样式</title>
    <style type="text/css">
        body {
            background: #dfdfdf ;
        }
        .first {
            border: 2px solid transparent ;
        }
        .second {
            border: 2px solid blue ;
            height: 200px ;
            width: 50% ;
            margin: 15px auto ;
            text-align: center ;
        }

        .second-hover {
            border-radius: 10px ;
            border-color: red ;
            background-color: #fafafa ;
        }
    </style>

</head>
<body>

    <div class="wrapper first">
        马踏飞燕
    </div>

    <div class="wrapper second">
        晨钟暮鼓
    </div>

    <script type="text/javascript">
        const e = document.querySelector( '.first' );

        let fn1 = () => {
            //e.style.background = '#9696fa' ;
            e.style.backgroundColor = '#9696fa' ; // background-color : #9696fa ;
            e.style.borderColor = 'red' ; // border-color : red ;
        }
        e.addEventListener( 'mouseover' , fn1 , false );

        let fn2 = () => {
            // e.style.background = 'transparent' ;
            e.style.backgroundColor = 'transparent' ;
            e.style.borderColor = 'transparent' ;
        }
        e.addEventListener( 'mouseout' , fn2 , false );

        const s = document.querySelector( '.second' );

        s.addEventListener( 'mouseover' , ()=>{
            let list = s.classList ; // 获得当前元素所有的 class name 组成的 DOMTokenList
            console.log( list );
            // 判断 当前元素的 class 属性取值中是否【不】包含 'second-hover'
            if( !list.contains( 'second-hover' ) ){ // 务必注意这里的感叹号
                list.add( 'second-hover' );
            } 
        } , false );

        s.addEventListener( 'mouseout' , ()=>{
            // 判断 当前元素的 class 属性取值中是否 【包含】 'second-hover'
            if( s.classList.contains( 'second-hover' ) ){
                s.classList.remove( 'second-hover' );
            }
        } , false );

    </script>
    
</body>
</html>